import React, { useState, useEffect } from 'react'
import { Swiper } from 'react-vant'
import './index.css'

interface PromotionItem {
  id: string
  image: string
  title: string
  price: number
  originalPrice: number
  discount: number
  category: string
  tags: string[]
  endTime: string
}

interface PromotionProps {
  items: PromotionItem[]
}

const Promotion: React.FC<PromotionProps> = ({ items }) => {
  const [currentTime, setCurrentTime] = useState(new Date())

  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentTime(new Date())
    }, 1000)
    return () => clearInterval(timer)
  }, [])

  const getTimeLeft = (endTime: string) => {
    const end = new Date(endTime)
    const diff = end.getTime() - currentTime.getTime()
    
    if (diff <= 0) return { days: '00', hours: '00', minutes: '00' }
    
    const days = Math.floor(diff / (1000 * 60 * 60 * 24))
    const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))
    
    return {
      days: days.toString().padStart(2, '0'),
      hours: hours.toString().padStart(2, '0'),
      minutes: minutes.toString().padStart(2, '0')
    }
  }

  return (
    <div className="promotion-container">
      <div className="promotion-header">
        <div className="promotion-title">
          <span className="title-text">限时特惠</span>
          <div className="time-left">
            <span className="time-label">距结束</span>
            <div className="time-blocks">
              {Object.entries(getTimeLeft(items[0]?.endTime)).map(([key, value]) => (
                <React.Fragment key={key}>
                  <span className="time-block">{value}</span>
                  {key !== 'minutes' && <span className="time-separator">:</span>}
                </React.Fragment>
              ))}
            </div>
          </div>
        </div>
        <div className="promotion-more">
          <span>更多优惠</span>
          <span className="arrow">&gt;</span>
        </div>
      </div>

      <div className="promotion-content">
        <Swiper
          className="promotion-swiper"
          indicator={false}
          loop
        >
          {items.map(item => (
            <Swiper.Item key={item.id}>
              <div className="promotion-item">
                <div className="discount-tag">{item.discount}折</div>
                <div className="category-tag">{item.category}</div>
                <div className="product-image">
                  <img src={item.image} alt={item.title} />
                </div>
                <div className="product-info">
                  <h3 className="product-title">{item.title}</h3>
                  <div className="tags">
                    {item.tags.map(tag => (
                      <span key={tag} className="tag">{tag}</span>
                    ))}
                  </div>
                  <div className="price-info">
                    <div className="price">
                      <span className="current">¥{item.price}</span>
                      <span className="original">¥{item.originalPrice}</span>
                    </div>
                    <div className="discount-info">
                      <span className="discount-text">省{Math.round(item.originalPrice - item.price)}元</span>
                    </div>
                  </div>
                </div>
              </div>
            </Swiper.Item>
          ))}
        </Swiper>
      </div>
    </div>
  )
}

export default Promotion 